import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css'

class Box extends Component {
    state = { 
        x: 0,
    }
    
    ClickLeft = (step) => {
        this.setState({
            x: this.state.x - step,
        })
        // console.log(this.state.x)
    };

    ClickRight = (step) => {
        this.setState({
            x: this.state.x + step,
        })
        // console.log(this.state.x)
    };


    render() { 
        const step = 10;
        let styles =  {
            width: "50px",
            height: "50px",
            backgroundColor: "orange",
            color: "white",
            fontWeight: 800,
            lineHeight: "50px",
            textAlign: "center",
            borderRadius: "5px",
            marginLeft: `${this.state.x}px`,
        }

        // if (this.state.x === 0) {
        //    styles.backgroundColor = 'green';
        // }
        // 短路算法
        this.state.x === 0 && (styles.backgroundColor = 'green')

        return (<React.Fragment>
            <div id="box" className="" style={styles}>{this.state.x}</div>
            <button type="button" className="btn btn-primary m-2" onClick={() => this.ClickLeft(step)}>Left</button>
            <button type="button" className="btn btn-danger m-2" onClick={() => this.ClickRight(step)}>Right</button>
        </React.Fragment>);
    }
}
 
export default Box;